<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: auto;
            height: auto;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        body {
            background-color: #c20b0bb1;
        }

        @keyframes animal {
            0% {
                transform: translateX(-50%) scale(1);
                filter: blur(2px);
            }

            50% {
                transform: translateX(-50%) scale(2);
                filter: blur(5px);
            }

            0% {
                transform: translateX(-50%) scale(1);
                filter: blur(2px);
            }

        }
        @keyframes font {
            0%{transform: translateY(-1000px);}
            100%{transform: translateY(-50px);}
        }

        .xing {
            animation: animal 2s infinite;
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
        }

        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
        }
        @keyframes pop {
            0%{opacity: 1;}
            100%{opacity: 0;}
        }
        .pop{
            animation: pop 2s forwards;
        }
    </style>
</head>

<body>
    <audio id="audio" style="opacity: 0;" src="./868084322.mp3" autoplay></audio>
    <canvas id="canvas">
        你的浏览器不支持canvas
    </canvas>
    <div id="pop" style="width: 100%;height: 100%;z-index: 99;background-color: #000;position: fixed;"> 
        <button id="btn" style="width: 100px;height: 35px;border-radius: 15px;background:#c44141;border: 0px;color: #fff;position: absolute;left: 50%;top: 50%;">点击</button>

    </div>
    <div id="main" class="main" style="display: none;">
        <div style="display: flex;transform: translateX(-50%);position: absolute;left: 50%;top: -100px;">
            <img src="./1.jpg" style="z-index: 100;border-radius: 50%;transform: translateX(15px);" width="50px">
            <div style="color: #d85b2a; z-index: 111;font-size: 40px;transform: translateY(5px);">♥</div>
            <img src="./2.jpg" style="z-index: 99;border-radius: 50%;transform: translateX(-15px);" width="50px">
        </div>
        <div  style="animation: font 1s forwards;">
            <img style="z-index: -2;" src=""
                alt="">
        </div>
        <div style="position: relative;">

            <div>
                <img class="xing" width="30px" height="30px" style="filter: blur(1px);"
                    src=""
                    alt="">
            </div>
            <div style="width: 15px;height: 15px;background-color: #4A4C48;margin: 0 auto;"></div>
            <div style="width: 45px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;"></div>
            </div>
            <div style="width: 75px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;"></div>
            </div>
            <div style="width: 105px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;"></div>
            </div>
            <div style="width: 75px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #2C8436;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;"></div>
            </div>
            <div style="width: 105px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #2C8436;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #2C8436;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;"></div>
            </div>
            <div style="width: 135px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #2C8436;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #2C8436;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;"></div>
            </div>
            <div style="width: 105px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #2C8436;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #2C8436;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;"></div>
            </div>
            <div style="width: 135px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #2C8436;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #2C8436;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #2C8436;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;"></div>
            </div>
            <div style="width: 165px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;"></div>
            </div>
            <div style="width: 135px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;background-color: #629635;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #629635;"></div>
                <div style="width: 15px;"></div>
            </div>
            <div style="width: 105px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #4A4C48;"></div>
                <div style="width: 15px;background-color: #AA732F;"></div>
                <div class="mi_xing" style="width: 15px;background-color: #4A4C48;"></div>
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div style="width: 15px;background-color: #4A4C48;"></div>
            </div>
            <div style="width: 45px;height: 15px;background-color: #4A4C48;margin: 0 auto;display: flex;">
                <div style="width: 15px;background-color: #4D4C48;"></div>
                <div style="width: 15px;background-color: #4A4C48;"></div>
                <div style="width: 15px;background-color: #4A4C48;"></div>
            </div>
        </div>
    </div>

    <script>
        window.onload = function () {
            document.getElementById("btn").onclick =()=>{
                let a = document.getElementById("audio")
                a.play()
                document.getElementById("pop").className = 'pop'
                document.getElementById("main").style.display = 'block'
            }
           
            
            let xin = document.getElementsByClassName("mi_xing")
            let colors = ["#6D91B9", "#DCB800", "#7D7827", "#95CBCE", "#629633"]
            setInterval(() => {
                let a = []
                for (let i = 0; i < 10; i++) {
                    a.push(parseInt(Math.random() * xin.length))
                }
                a.forEach(el => {
                    xin[el].style.background = colors[parseInt(Math.random() * colors.length)]
                })
            }, 16)
        }
    </script>

    <script>
        // 获取canvas元素
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // 设置canvas宽度和高度
        canvas.width = 800;
        canvas.height = 450;

        // 定义雪花数组
        let snowflakes = [];

        // 定义雪花类
        function Snowflake(x, y, radius, speed) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.speed = speed;

            // 方法：绘制雪花
            this.draw = function () {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = 'white';
                ctx.fill();
            }

            // 方法：更新雪花位置
            this.update = function () {
                this.y += this.speed;
                if (this.y > canvas.height) {
                    this.y = 0;
                }
            }
        }

        // 添加雪花
        function addSnowflake() {
            const x = Math.random() * canvas.width;
            const y = 0;
            const radius = Math.random() * 2 + 1;
            const speed = Math.random() * 1 + 1;
            const snowflake = new Snowflake(x, y, radius, speed);
            snowflakes.push(snowflake);
        }

        // 绘制画面
        function draw() {
            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 循环绘制雪花
            for (var i = 0; i < snowflakes.length; i++) {
                snowflakes[i].draw();
            }
        }

        // 更新画面
        function update() {
            // 循环更新雪花位置
            for (var i = 0; i < snowflakes.length; i++) {
                snowflakes[i].update();
            }
        }

        // 添加初始雪花
        for (var i = 0; i < 50; i++) {
            addSnowflake();
        }

        // 每隔一段时间添加雪花
        setInterval(function () {
            addSnowflake();
        }, 100);

        // 每帧更新画面和雪花位置
        function loop() {
            update();
            draw();
            requestAnimationFrame(loop);
        }

        // 开始动画循环
        loop();
    </script>
</body>

</html>